<template>
	<u-popup :show="show" @close="close" mode="center" overlayOpacity="0.7">
		<view class="get-medal m-b-30">
			<view class="title white text-center">恭喜获得</view>
			<view class="medal text-center flex-no-horizontal">
				<image src="" class="medal-icon"></image>
			</view>
			<view class="text-center white f-s medal-des"></view>
			<view class="text-center flex-no-horizontal close">
				<u-icon name="close-circle" color="#ffffff" size="24"></u-icon>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default{
		props: {
			show: {
				type: Boolean,
				default() {
					return false
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scope>
	::v-deep.u-popup__content{
		background-color: #fff0;
		width: 100%;
	}
	.get-medal{
		width: 100%;
		background: transparent;
		color: white;
		.title{
			font-size: 30px;
		}
		.medal{
			background: url('../../../static/img/light.png') no-repeat;
			background-size: 100% 100%;
			height: 700rpx;
			width: 100%;
			justify-content: center;
			.medal-icon{
				width: 440rpx;
				height: 506rpx;
			}
		}
		.medal-des{
			padding: 0 80rpx 80rpx;
		}
		.close{
			justify-content: center;
		}
	}
</style>
